<template>
    <div>
        <el-table ref="tables" v-loading="tableload" :data="fankuiList" row-key="id" style="width:100%" default-expand-all stripe border>
            <el-table-column label="id" prop="id"></el-table-column>
            <el-table-column label="用户" prop="account"></el-table-column>
            <el-table-column label="反馈内容" prop="content"></el-table-column>
            <el-table-column label="反馈图片">
                <template slot-scope="scope">
                    <div @click="fangdaImg(scope.row.imgs)">
                        <img style="width: 100px;" :src="BASE_URL + '/' + scope.row.imgs" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="反馈时间" prop="create_time"></el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="listLen"
            :page-size="limit"
            @current-change="toPage"
            :current-page.sync="currentPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!-- 放大图片 -->
        <el-dialog title="反馈图片" :visible.sync="showFankuiImage" width="85%">
            <div style="width: 70%; margin: 0 auto;">
                <img :src="BASE_URL + '/' + FankuiImageUrl" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getSuggest} from "../../../api/user/user";
import { BASE_URL } from "../../../config/app";
export default {
    data() {
        return {
            tableload: false,
            fankuiList: [],
            BASE_URL: '',
            listLen: 0,
            limit: 15,
            currentPage: 1,
            showFankuiImage: false,
            FankuiImageUrl: ''
        }
    },
    methods: {
        getList(page = 1){
            getSuggest({
                page: page,
                per_page: this.limit
            }).then((res) => {
                this.tableload = false;
                if(res.code){
                    this.$message.error(res.message);
                    return;
                }
                this.listLen = Number(res.data.last_page);
                this.fankuiList = res.data.list;
            })
        },
        toPage(val){
            this.currentPage = val;
            this.getList(val);
        },
        fangdaImg(imgUrl){
            this.FankuiImageUrl = imgUrl;
            this.showFankuiImage = true;
        }
    },
    created(){
        this.BASE_URL = BASE_URL;
        this.getList();
    },
}
</script>

<style scoped>
.txt_r {text-align: right;}
.detail{font-size:16px; }
.detail td{padding:10px; vertical-align: middle;}
</style>
